<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
  <!-- #endif -->
    <view class="page">
      <view class="notice-info">
        <!-- #ifdef WEB -->
        <view><text class="text">Web 端背景色为绿色，字体颜色为蓝色</text></view>
        <!-- #endif -->
        <!-- #ifdef MP -->
        <view><text class="text">小程序端背景色为蓝色，字体颜色为红色</text></view>
        <!-- #endif -->
        <!-- #ifdef APP -->
        <view><text class="text">App 端背景色为红色，字体颜色为绿色</text></view>
        <!-- #endif -->
      </view>
      <view class="mt-10">
        <text class="text text-primary">color: @primary-color: #3498db</text>
      </view>
      <view class="mt-10">
        <text class="text text-secondary">color: @secondary-color: #9353D3</text>
      </view>
      <view class="list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="_list mt-10">
        <view class="item border-radius-4">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
        <view class="item border-radius-4 active mt-10">
          <text class="text">label:</text>
          <text class="text">value</text>
        </view>
      </view>
      <view class="message-list mt-10">
        <text class="message">message</text>
        <text class="mt-10 success-message">success message</text>
        <text class="mt-10 error-message">error message</text>
      </view>
      <view class="message-list mt-10">
        <text>以下 message 字体，Web 端比以上 message 更细，App | MP 端更粗</text>
        <text class="mt-10 _message">message</text>
        <text class="mt-10 _success-message">success message</text>
        <text class="mt-10 _error-message">error message</text>
      </view>
      <view class="list mt-10">
        <view class="item-1"><text class="text">item-1</text></view>
        <view class="item-2 mt-10"><text class="text">item-2</text></view>
        <view class="item-3 mt-10"><text class="text">item-3</text></view>
        <view class="item-4 mt-10"><text class="text">item-4</text></view>
        <view class="item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="list mt-10">
        <view class="_item-1"><text class="text">item-1</text></view>
        <view class="_item-2 mt-10"><text class="text">item-2</text></view>
        <view class="_item-3 mt-10"><text class="text">item-3</text></view>
        <view class="_item-4 mt-10"><text class="text">item-4</text></view>
        <view class="_item-5 mt-10"><text class="text">item-5</text></view>
      </view>
      <view class="debug mt-10">this is debug view</view>
      <view class="_debug mt-10">this is debug view</view>
    </view>
  <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>

<style lang="less">
  @import '../../styles/variables.less';
  @import '../../styles/index.less';

  @secondary-color: #9353d3;

  // 使用变量
  .text-secondary {
    color: @secondary-color;
  }

  // 嵌套选择器
  ._list {
    &:extend(.padding-10);
    border: @border-width solid @red-color;

    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-direction: row;
      padding: 5px 10px;
      background-color: #3498db;

      // 状态选择器
      &.active {
        background-color: #0983d5;
      }

      .text {
        color: @white-color;
      }
    }
  }

  // 使用混合器
  ._border-radius(@radius) {
    border-radius: @radius;
  }

  ._border-radius-4 {
    ._border-radius(4px);
  }

  ._border-radius-10 {
    ._border-radius(10px);
  }

  .message-list {
    text {
      display: block;
    }
  }

  // 使用 extends
  ._message {
    &:extend(.padding-10);
    &:extend(._border-radius-4);
    border: @border-width solid #ccc;
    /* #ifdef APP || MP */
    font-weight: 700;
    /* #endif */
    /* #ifdef WEB */
    font-weight: 300;
    /* #endif */
  }

  ._success-message {
    &:extend(._message);
    border-color: @green-color;
    color: @green-color;
  }

  ._error-message {
    &:extend(._message);
    border-color: @red-color;
    color: @red-color;
  }

  // 条件语句
  @debug-mode: true;

  // 调试样式
  ._debug when (@debug-mode) {
    &:extend(.padding-10);
    &:extend(.border-radius-4);
    border: @border-width solid @red-color;
  }

  // 生产样式
  ._debug when not (@debug-mode) {
    display: none;
  }

  // 循环
  .loop(@index) when (@index > 0) {
    ._item-@{index} {
      &:extend(.border-radius-4);
      width: 60px * @index;
      height: 30px;
      padding-left: 5px;
      background-color: @primary-color;

      .text {
        line-height: 30px;
        color: @white-color;
      }
    }

    .loop(@index - 1);
  }

  .loop(5);
</style>